<template>
  <a-layout class="admin-layout">
    <a-layout-sider
      v-model:collapsed="collapsed"
      :trigger="null"
      collapsible
      class="admin-sider"
      :class="{ 'admin-sider-mobile': isMobile }"
      v-if="!isMobile || siderVisible"
    >
      <div class="logo">
        <img src="/logo.png" alt="Logo" />
        <h1 v-if="!collapsed">提示词工具</h1>
      </div>
      <a-menu
        v-model:selectedKeys="selectedKeys"
        theme="dark"
        mode="inline"
      >
        <a-menu-item key="dashboard">
          <template #icon><dashboard-outlined /></template>
          <span>仪表盘</span>
          <router-link to="/admin/dashboard"></router-link>
        </a-menu-item>
        <a-menu-item key="users">
          <template #icon><user-outlined /></template>
          <span>用户管理</span>
          <router-link to="/admin/users"></router-link>
        </a-menu-item>
        <a-menu-item key="pricing-plans">
          <template #icon><crown-outlined /></template>
          <span>套餐管理</span>
          <router-link to="/admin/pricing-plans"></router-link>
        </a-menu-item>
        <a-menu-item key="prompts">
          <template #icon><file-text-outlined /></template>
          <span>提示词管理</span>
          <router-link to="/admin/prompts"></router-link>
        </a-menu-item>
        <a-menu-item key="payments">
          <template #icon><dollar-outlined /></template>
          <span>支付记录</span>
          <router-link to="/admin/payments"></router-link>
        </a-menu-item>
        <a-menu-item key="settings">
          <template #icon><setting-outlined /></template>
          <span>系统设置</span>
          <router-link to="/admin/settings"></router-link>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    
    <a-layout>
      <a-layout-header class="admin-header">
        <div class="header-left">
          <a-button
            type="text"
            @click="toggleCollapsed"
            class="trigger-button"
          >
            <menu-unfold-outlined v-if="collapsed || (isMobile && !siderVisible)" />
            <menu-fold-outlined v-else />
          </a-button>
        </div>
        
        <div class="header-right">
          <a-dropdown>
            <a class="admin-dropdown-link" @click.prevent>
              <a-avatar>
                <template #icon><user-outlined /></template>
              </a-avatar>
              <span class="admin-username" v-if="!isMobile">管理员</span>
              <down-outlined />
            </a>
            <template #overlay>
              <a-menu>
                <a-menu-item key="profile">
                  <user-outlined />
                  个人资料
                </a-menu-item>
                <a-menu-item key="settings">
                  <setting-outlined />
                  账号设置
                </a-menu-item>
                <a-menu-divider />
                <a-menu-item key="frontend">
                  <home-outlined />
                  <router-link to="/">前台首页</router-link>
                </a-menu-item>
                <a-menu-item key="logout" @click="handleLogout">
                  <logout-outlined />
                  退出登录
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
      </a-layout-header>
      
      <a-layout-content class="admin-content">
        <router-view></router-view>
      </a-layout-content>
      
      <a-layout-footer class="admin-footer">
        提示词工具 ©2023 Created by Your Company
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<script>
import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { message } from 'ant-design-vue';
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  DashboardOutlined,
  UserOutlined,
  CrownOutlined,
  FileTextOutlined,
  DollarOutlined,
  SettingOutlined,
  LogoutOutlined,
  HomeOutlined,
  DownOutlined
} from '@ant-design/icons-vue';

export default {
  name: 'AdminLayout',
  components: {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    DashboardOutlined,
    UserOutlined,
    CrownOutlined,
    FileTextOutlined,
    DollarOutlined,
    SettingOutlined,
    LogoutOutlined,
    HomeOutlined,
    DownOutlined
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    
    const collapsed = ref(false);
    const siderVisible = ref(false);
    const selectedKeys = ref(['dashboard']);
    
    // 响应式设计
    const windowWidth = ref(window.innerWidth);
    const isMobile = computed(() => windowWidth.value < 768);
    
    const toggleCollapsed = () => {
      if (isMobile.value) {
        siderVisible.value = !siderVisible.value;
      } else {
        collapsed.value = !collapsed.value;
      }
    };
    
    const handleLogout = () => {
      // 调用登出API
      message.success('退出登录成功');
      router.push('/login');
    };
    
    const handleResize = () => {
      windowWidth.value = window.innerWidth;
    };
    
    // 根据路由更新选中的菜单项
    watch(() => route.path, (path) => {
      const pathSegments = path.split('/');
      if (pathSegments.length >= 3) {
        selectedKeys.value = [pathSegments[2]];
      }
    }, { immediate: true });
    
    // 在移动端下，点击菜单项后自动隐藏侧边栏
    watch(selectedKeys, () => {
      if (isMobile.value) {
        siderVisible.value = false;
      }
    });
    
    onMounted(() => {
      window.addEventListener('resize', handleResize);
    });
    
    onUnmounted(() => {
      window.removeEventListener('resize', handleResize);
    });
    
    return {
      collapsed,
      siderVisible,
      selectedKeys,
      windowWidth,
      isMobile,
      toggleCollapsed,
      handleLogout
    };
  }
};
</script>

<style scoped>
.admin-layout {
  min-height: 100vh;
}

.admin-sider {
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  z-index: 10;
}

.admin-sider-mobile {
  position: fixed;
  height: 100vh;
  z-index: 999;
}

.logo {
  height: 64px;
  padding: 16px;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  margin-bottom: 8px;
}

.logo img {
  height: 32px;
  width: 32px;
}

.logo h1 {
  color: white;
  margin: 0 0 0 12px;
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
}

.admin-header {
  background: #fff;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  z-index: 9;
}

.header-left {
  display: flex;
  align-items: center;
}

.header-right {
  padding-right: 24px;
}

.trigger-button {
  font-size: 18px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
  height: 64px;
  display: flex;
  align-items: center;
}

.trigger-button:hover {
  color: #1890ff;
}

.admin-dropdown-link {
  display: flex;
  align-items: center;
  color: rgba(0, 0, 0, 0.65);
}

.admin-username {
  margin: 0 8px;
}

.admin-content {
  margin: 24px;
  background: #fff;
  min-height: 280px;
  overflow: initial;
}

.admin-footer {
  text-align: center;
  padding: 16px 50px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .admin-content {
    margin: 12px;
    padding: 12px;
  }
  
  .admin-footer {
    padding: 12px;
  }
}
</style>